<template>
    <div class="intelligentMain intelligentMain">
      <div class='search-wrap'>
           <div class='reply-search-wrap'>
              <input 
              v-model="keyword"
              @keyup.enter='requestData'
              type="text" placeholder="请输入关键字">
              <i class='searchIcon el-icon-search' @click='requestData'></i>
           </div>

           <a class='cancelWrap' @click='cancelTxt' v-if='cancel' href="javascript:;">取消</a>
      </div>
       
        <p v-if="noMore" class='noMore'></p>




        <ul class='intelligentMainUl' v-if='searchResult'>
            <li>
                <span>智能机器人</span>
                <div class='searchContent' ref='search'>
                    <p>搜索结果：</p>

                        <div v-for='(item,index) in IntellGentBOX' :key='index'>
                                <p  @click='getContent(item)'>{{item}}</p>
                              <a href="javascript:;" @click='sendOut(item)'>发送</a>  
                        </div>
                        <p class='more' @click='loadMore' v-if="loading">点击加载更多</p>
                        <p class='more' v-if='loadingOn'>加载中...</p>
                        <p class='more' v-if="Loaded">无更多数据</p>
                </div>
            </li>
        </ul>

        <div class='nointell' v-if='searchNo'>未获得相关的智能回复</div>
    </div>
</template>

<script>
import chat from "../../libs/chat";
import contentQ from "../contentQ";
export default {
  name: "intelligent",

  data() {
    return {
      keyword: "",
      page: "1",
      limit: "20",
      IntellGentBOX: "", //智能回复的内容
      newList:"",
      noMore: true,
      searchResult: true, //搜索框的显示或隐藏
      searchNo: false, //未收到所显示的
      loading: true,
      loadingOn: false,
      Loaded: false,
      cancel:false,
      
    };
  },

  methods: {
    requestData() {
      let dataArr = [],
        _self = this;
        console.log(this.newList);
      if (this.keyword !== "") {
        this.cancel = true;
        $(".reply-search-wrap").css("width", "87%");
        chat.knowledges(this.keyword, this.page, this.limit, function(json) {
          let jsonData = json.data.recordList;
          if (jsonData.length !== 0) {
            _self.searchResult = true;
            _self.searchNo = false;
            _self.noMore = false;
            for (let i = 0; i < jsonData.length; i++) {
              dataArr.push(jsonData[i].content);
            }

            _self.IntellGentBOX = dataArr;
            console.log(_self.IntellGentBOX);
          } else {
            _self.searchResult = false;
            _self.searchNo = true;
            _self.noMore = false;
          }

          _self.keyword = "";
        });
      } else {
        _self.$message.error("输入框不能为空");
      }
    },

    //取消
    cancelTxt(){
        this.IntellGentBOX = this.newList;
        this.searchResult = true;
        this.searchNo = false;
        this.cancel = false;
        $(".reply-search-wrap").css("width", "100%");
    },
    //发送消息到聊天窗口
    sendOut(IntellGentContent) {
      contentQ.$emit("IntellGentContent", IntellGentContent);
    },

    //发送消息到textarea
    getContent(textareaContent) {
      contentQ.$emit("textareaContent", textareaContent);
    },

    //默认请求智能回复列表
    defaultList() {
      let _self = this,
        dataArr = [];
      _self.IntellGentBOX = "";
      chat.knowledges(this.keyword, this.page, this.limit, function(json) {
        let jsonData = json.data.recordList;
        if (jsonData.length !== 0) {
          _self.searchResult = true;
          _self.searchNo = false;
          _self.noMore = false;
          for (let i = 0; i < jsonData.length; i++) {
            dataArr.push(jsonData[i].content);
          }

          _self.IntellGentBOX = dataArr;
          _self.newList = dataArr;
          console.log(_self.IntellGentBOX);
        } else {
          _self.searchResult = false;
          _self.searchNo = true;
          _self.noMore = false;
        }

        _self.keyword = "";
      });
    },
    //加载更多
    loadMore() {
      this.page += 1;
      this.loading = false;
      this.loadingOn = true;
      chat.knowledges(this.keyword, this.page, this.limit, json => {
        let jsonData = json.data.recordList;
        if (jsonData.length !== 0) {
          this.searchResult = true;
          this.searchNo = false;
          this.noMore = false;
          this.loading = true;
          this.loadingOn = false;
          for (let i = 0; i < jsonData.length; i++) {
            dataArr.push(jsonData[i].content);
          }

          this.IntellGentBOX = dataArr;
          this.newList = dataArr;
          console.log(this.newList);
        } else {
          this.loading = false;
          this.loadingOn = false;
          this.Loaded = true;
          this.searchResult = true;
        }
      });
    }
  },

  mounted() {
    let winHeight = $(window).height();
    let height = winHeight - 250;
    $(".searchContent").css("height", height);
    $(window).resize(() => {
      let winHeight = $(window).height();
      let height = winHeight - 250;
      $(".searchContent").css("height", height);
    });
    this.defaultList();
  }
};
</script>

<style>
ul {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

li {
  list-style-type: none;
}

.intelligentMainUl span {
  font-size: 14px;
  display: inline-block;
  padding-bottom: 1rem;
}

.reply-search-wrap .searchIcon {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
}


.reply-search-wrap input {
  width: 100%;
  padding: 0.5rem 0;
  text-indent: 1em;
  outline: none;
  border-radius: 5px;
  border: 1px solid #dee5e6;
}

.search-wrap{
  padding: 1rem;
  display: flex;
  border-bottom: 1px solid #e6e7ee;
}

.search-wrap .reply-search-wrap{
  position: relative;
  width: 100%;
}

.noMore {
  width: 100%;
  height: 11rem;
  padding: 0;
  background: url("../../assets/icon/noData.png") center center no-repeat;
  background-size: 6rem;
}

.cancelWrap{
  width: 13%;
  line-height: 2rem;
  font-size: 14px;
  color: #aaa;
  margin-left: .5rem;
}


.intelligentMain ul {
  text-align: left;
  padding: 1rem;
  overflow-y: auto;
}

.intelligentMain ul li div p {
  font-size: 12px;
  color: #676869;
  margin: 1rem 0;
}

.intelligentMain ul li div div {
  padding: 0.5rem;
  background: #f0f4f5;
  border-radius: 4px;
  font-size: 12px;
  position: relative;
  margin: 1rem 0;
}

.intelligentMain ul li div div a {
  text-align: right;
  position: absolute;
  right: 1rem;
  top: 0.5rem;
}

.intelligentMain ul li div div p {
    margin: 0;
    cursor: pointer;
    width: 81%;
    word-break: break-all;
}

.searchContent {
  overflow-y: auto;
}

.searchContent .more {
  text-align: center;
  cursor: pointer;
}

.intelligentMainUl ul li {
  padding: 0 1rem 0 0.5rem;
}

.intelligentMainUl ul li span {
  font-size: 0.9rem;
}

.nointell {
  text-align: left;
  padding: 0.5rem;
  background: #e6eaee;
  border-radius: 4px;
  font-size: 12px;
  margin: 1rem;
}
</style>
